/*
 * @Author: wangtao
 * @Date: 2020-07-21 17:38:24
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-01 14:15:31
 * @Description: 公共的message-box  可替换loginTips
 */

import React, { PureComponent } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Modal,
} from 'react-native';
import { empty09 } from '@/images';
import {
  screenWidth,
  screenHeight,
  px2dp,
  mainBgColorWhite,
  mainBgColorBlack,
  fontColorBlack,
} from '../styles';

import * as Button from '../button';
import msg from '../msg';
import { noop } from '../noop';

const { Submit } = Button;

export default class MessageBoxBig extends PureComponent {
  static defaultProps = {
    text: null,
    okFn: noop,
    okText: null,
    imgSource: null,
  };

  render() {
    const { text, okText, okFn, imgSource } = this.props;
    return (
      <Modal animationType='slide' transparent visible>
        <View style={styles.container} />
        <View style={styles.containerWrap}>
          <View style={styles.wrap}>
            <Image style={styles.img} resizeMode='stretch' source={imgSource || empty09} />
            <Text style={styles.text}>{text}</Text>
            <Submit
              text={okText}
              boxStyle={{
                width: px2dp(480),
                height: px2dp(80),
                borderRadius: px2dp(8),
              }}
              btnStyle={styles.bottomBtn}
              onClick={() => {
                msg.emit('app:messageBoxBig', { isVisible: false });
                okFn();
              }}
            />

            <TouchableOpacity
              style={styles.del}
              onPress={() => {
                msg.emit('app:messageBoxBig', { isVisible: false });
              }}
            >
              <Image
                style={styles.delImg}
                resizeMode='stretch'
                source={require('./del.png')}
              />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: screenWidth,
    height: screenHeight,
    backgroundColor: mainBgColorBlack,
    opacity: 0.2,
    zIndex: 10,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
  },
  containerWrap: {
    width: screenWidth,
    height: screenHeight,
    zIndex: 10,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  wrap: {
    width: px2dp(600),
    height: px2dp(610),
    backgroundColor: mainBgColorWhite,
    zIndex: 20,
    borderRadius: px2dp(12),
    alignItems: 'center',
    padding: px2dp(48),
    justifyContent: 'space-between',
  },
  img: {
    width: px2dp(240),
    height: px2dp(240),
  },
  del: {
    width: px2dp(40),
    height: px2dp(40),
    position: 'absolute',
    top: px2dp(48),
    left: px2dp(48),
  },
  delImg: {
    width: px2dp(28),
    height: px2dp(28),
  },
  text: {
    color: fontColorBlack,
    fontSize: px2dp(32),
    textAlign: 'center',
  },
  bottomBtn: {
    width: px2dp(480),
    height: px2dp(80),
    color: '#fff',
    borderRadius: px2dp(12),
  },
});
